<template>
  <view >
    <view class="log_wrapper">
      <view class="tx1">{{bindType=='weixin'?'微信':'QQ'}}账号绑定</view>
      <view class="tx2">您已登录：<text>{{nickname}}</text></view>
      <view class="tx3">请关联您的{{$store.state.config.sitename}}账号，以便您下次直接登录</view>
      <view class="field_cell_group">
        <view class="field_cell choose-utype" style="border:0;">
          <view class="t_box">
            <text class="swb" :class="utype==2?'active':''" @click="utype=2">我要找工作</text>
            <text class="swb" :class="utype==1?'active':''" @click="utype=1">我要招聘</text>
          </view>
        </view>
        <view class="field_cell">
          <input
		  placeholder-style="color:#757575;font-size:14px !important;" 
            v-model="mobile"
            class="log_field"
            type="tel"
            placeholder="请输入手机号"
            autocomplete="off"
          />
        </view>
        <view class="field_cell">
          <input
		  placeholder-style="color:#757575;font-size:14px !important;" 
            v-model="code"
            class="log_field"
            type="number"
            placeholder="请输入验证码"
            autocomplete="off"
          />
          <button class="log_get_btn" @click="sendSms" :style="'color:'+$store.state.sendSmsBtnTextColor">{{ $store.state.sendSmsBtnText }}</button>
        </view>
        <view class="btn_group" style="margin-top:10px;">
          <u-button class="btn_mb" type="info" size="large" round @click="handleSubmit"
            >绑定网站账号</u-button
          >
          <view class="g_agree">
            <p>* 如果您没有注册过账号将自动帮您注册新账号</p>
            <p>继续绑定即表示您已同意 <text @click="showAgreement('agreement')">《用户协议》</text>和 <text @click="showAgreement('privacy')">《隐私政策》</text></p>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      :lazy-render="false"
      v-model="showText"
      position="right"
      :overlay="false"
      style="width:100%;height:100%"
    >
      <Head
        :goback_custom="true"
        @gobackCustomMethod="showText = false"
        :show_right="'false'"
      >{{ showTextTitle }}</Head
      >
      <view class="text_content">
        <text style="white-space: pre-line;" v-html="showTextContent"></text>
      </view>
    </u-popup>
    <Captcha ref="captcha"></Captcha>
  </view>
</template>

<script>
import  handlerHttpError from '@/utils/error'
import http from '@/utils/http'
import api from '@/api'
import Captcha from '@/components/captcha/index'
import {mapState} from 'vuex'
export default {
  name: 'AccountBinding',
  components: {
    Captcha
  },
  data () {
    return {
      bindType: 'weixin',
      utype: 2,
      mobile: '',
      code: '',
      regularMobile: /^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$|16[0-9]{9}$|19[0-9]{9}$/,
      openid: '',
      unionid: '',
      nickname: '',
      avatar: '',
      showTextTitle: '用户协议',
      showTextContent: '',
      showText: false
    }
  },
  created () {
    this.openid = this.$Route.query.openid
    this.unionid = this.$Route.query.unionid
    this.nickname = this.$Route.query.nickname
    this.avatar = this.$Route.query.avatar
    this.bindType = this.$Route.query.bindType
  },
  computed:{
	  ...mapState({
		  sitename:state => state.config.sitename
	  })
  },
  methods: {
    showAgreement (alias) {
      this.showTextContent = ''
      this.showText = true
      this.showTextTitle = alias === 'agreement' ? '用户协议' : '隐私政策'
      http
        .get(api.agreement, {})
        .then(res => {
          if (parseInt(res.code) === 200) {
            this.showTextContent =
              alias === 'agreement' ? res.data.agreement : res.data.privacy
          } else {
            this.$notify(res.message)
          }
        })
        .catch(() => {})
    },
    redirectTo () {
      if (this.utype === 1) {
        this.$Route.push('/member/company/index')
      } else {
        this.$Route.push('/member/personal/index')
      }
    },
    handleSubmit () {
      if (!this.mobile) {
        this.$notify('请输入手机号')
        return false
      }
      if (!this.regularMobile.test(this.mobile)) {
        this.$notify('手机号格式不正确')
        return false
      }
      if (!this.code) {
        this.$notify('请输入验证码')
        return false
      }
      let postData = {
        mobile: this.mobile,
        code: this.code,
        utype: this.utype,
        openid: this.openid,
        unionid: this.unionid,
        nickname: this.nickname,
        avatar: this.avatar
      }
      let apiUrl = this.bindType == 'weixin' ? api.bind_weixin : api.bind_qq
      http
        .post(apiUrl, postData)
        .then(response => {
          if (parseInt(response.code) === 200) {
            this.$store.commit('clearCountDownFun')
            this.$store.commit('setLoginState', {
              whether: true,
              utype: response.data.utype,
              token: response.data.token,
              mobile: response.data.mobile,
              userIminfo: response.data.user_iminfo
            })
            if (response.data.next_code != 200) {
              handlerHttpError({ code: response.data.next_code, message: '' })
            } else {
              this.redirectTo()
            }
          } else {
            this.$notify(response.message)
          }
        })
        .catch(() => {})
    },
    // 发送验证码
    sendSms () {
      let _this = this
      if (this.$store.state.sendSmsBtnDisabled) {
        return false
      }
      if (!this.mobile) {
        this.$notify('请输入手机号')
        return false
      }
      if (!this.regularMobile.test(this.mobile)) {
        this.$notify('手机号格式不正确')
        return false
      }
      this.$refs.captcha.show(res => {
        this.$store
          .dispatch('sendSmsFun', {
            url: api.sendsms_auth_mobile_nocheck,
            mobile: this.mobile,
            type: this.utype,
            captcha: res
          })
          .then(response => {
            if (response.code === 200) {
              _this.$notify({type: 'success', message: _this.$store.state.sendSmsMessage})
            } else {
              _this.$notify(_this.$store.state.sendSmsMessage)
            }
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.t_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .swb {
    width: 290rpx;font-size: 28rpx;padding: 12rpx 0 12rpx 94rpx;border-radius: 66rpx;color: #999999;
    // background: #f0f0f0 url("../../assets/images/sw_fw_ic1.png") 20px center no-repeat;
	background-size: 34rpx;
    &.active {
      // background: #ebf5ff url("../../assets/images/sw_fw_ic2.png") 20px center no-repeat;
	  background-size: 34rpx;color: #3388ff;
    }
  }
}
.log_wrapper {
  width: 646rpx;
  margin: 0 auto;
}
.tx1 {
  padding: 110rpx 0 56rpx;
  font-size: 52rpx;
  color: #333333;
}
.field_cell {
  width: 100%;
  border-bottom: 2rpx solid #eeeeee;
  position: relative;
  padding-top: 40rpx;
}
.log_field {
  border: 0;
  width: 100%;
  height: 100%;
  color: #333333;
  font-size: 30rpx;
  &::placeholder {
    color: #c9c9c9;
  }
}
.log_get_btn {
  position: absolute;
  right: 0;
  bottom: -36rpx;
  border: 0;
  height: 100%;
  font-size: 30rpx;
  padding: 0;
  background-color: #ffffff;
}
.tx2 {
  font-size: 32rpx;
  color: #999999;
  text {
    color: #333333;
  }
}
.tx3 {
  font-size: 26rpx;
  color: #ff6060;
  padding-top: 20rpx ;
}
.btn_mb {
  margin-bottom: 32rpx;
}

.g_agree {
  margin-top:20rpx;
  color:#999;
  font-size: 26rpx;
  text-align: center;
  padding:0 0 40rpx;
  line-height:50rpx;
  text{cursor:pointer;color: #1787fb;}
  text:hover{text-decoration:underline;color:#1787fb}
  .el-checkbox__label { color: #999;
    text { color: #1787fb; }
  }
}
.u-radio{
  font-size:28rpx;
}

.choose-utype{
  margin-top:0px;

}
</style>
